<script setup lang="ts">
import PanContainHead from "./PanContainHead.vue";
import PanFileBodyGrid from "./PanFileBodyGrid.vue";
import PanFileBodyList from "./PanFileBodyList.vue";

import { PanFilter, PanLayout, usePanState } from "./provider";

const { layout } = usePanState();
const props = withDefaults(
  defineProps<{
    filter?: PanFilter;
  }>(),
  {
    filter() {
      return {
        pDirId: 0
      };
    }
  }
);
</script>

<template>
  <div class="pan-container">
    <el-container>
      <el-header>
        <PanContainHead />
      </el-header>

      <el-main>
        <PanFileBodyGrid />
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.pan-container {
  height: 100%;

  .el-container {
    height: 100%;
    .el-header {
      --el-header-padding: 0;
    }
    .el-main {
      --el-main-padding: 0;
      height: 100px;
    }
  }
}
</style>
